<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旺财4号</title>
    <link rel="icon" href="../imges/big_wc.ico" type="image/x-icon" />
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="../bootStrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootStrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/my.css" />
    <style>
        body {
            /* 消除my.css全局样式影响 */
            padding-top: 0px;
        }

        .myBtn:hover {
            background-color: pink;

        }

        .myBtn:focus {
            border-bottom: 5px solid skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 模态窗 -->
        <h3>模态窗</h3>
        <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target=".bs-example-modal-lg">
            模态窗
        </button>

        <button class="btn btn-default myBtn" type="button">Button</button>
        <!-- Modal -->
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">.col-md-4</div>
                            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                            <div class="col-md-4 col-md-offset-2">.col-md-4 .col-md-offset-2</div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-9">
                                Level 1: .col-sm-9
                                <div class="row">
                                    <div class="col-xs-8 col-sm-6">
                                        Level 2: .col-xs-8 .col-sm-6
                                    </div>
                                    <div class="col-xs-4 col-sm-6">
                                        Level 2: .col-xs-4 .col-sm-6
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 下拉菜单 -->
        <h3>下拉菜单</h3>
        <div class="dropdown">
            <button id="dLabel" class="btn btn-warning" type="button" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                Dropdown trigger
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dLabel">
                <li>
                    <div style="background-color: pink;">1</div>
                </li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>

        <!-- 标签页 -->
        <h3>标签页</h3>
        <div>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
                </li>
                <li role="presentation">
                    <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
                </li>
                <li role="presentation">
                    <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade active" id="home">
                    home-内容
                </div>
                <div role="tabpanel" class="tab-pane fade" id="profile">
                    profile-内容
                </div>
                <div role="tabpanel" class="tab-pane fade" id="messages">
                    messages-内容
                </div>
                <div role="tabpanel" class="tab-pane fade" id="settings">
                    settings-内容
                </div>
            </div>

        </div>

        <!-- 文字提示 -->
        <h3>文字提示</h3>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-delay="500"
            title="Tooltip on left">Tooltip on left</button>

        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top"
            title="Tooltip on top">Tooltip on top</button>

        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
            title="Tooltip on bottom">Tooltip on bottom</button>

        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"
            title="Tooltip on right">Tooltip on right</button>

        <!-- 气泡卡片 -->
        <h3>气泡卡片</h3>
        <button type="button" id="myPopover" class="btn btn-lg btn-success" data-toggle="popover" title="Popover title"
            data-placement="top" data-content="气泡卡片内容" data-trigger="focus">点我弹出/隐藏弹出框</button>

        <!-- 警告框 -->
        <h3>警告框</h3>
        <div class="alert alert-success alert-dismissible fade in" role="alert" id="myAlert">
            <button type="button" class="close " data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span>
            </button>
            <strong>Warning!</strong> Better check yourself, you're not looking too good.
        </div>

        <!-- 加载按钮 -->
        <h3>加载按钮</h3>
        <button type="button" id="myButton" class="btn btn-primary" autocomplete="off">
            Loading state
        </button>

        <!-- 折叠 -->
        <h3>折叠</h3>
        <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" 
        aria-expanded="false"  aria-controls="collapseExample">
            Link with href
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
            aria-expanded="false" aria-controls="collapseExample">
            Button with data-target
        </button>
        <div class="collapse" id="collapseExample">
            <div class="well">
                折叠的内容
            </div>
        </div>

        <!-- 手风琴 -->
        <h3>手风琴</h3>
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                            aria-expanded="false" aria-controls="collapseOne">
                            Collapsible Group Item #1
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        1号内容
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            Collapsible Group Item #2
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="panel-body">
                        2号内容
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                    <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                            href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Collapsible Group Item #3
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                    <div class="panel-body">
                        3号内容
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        $(() => {
            $('.bs-example-modal-lg').on('hidden.bs.modal', function (e) {
                console.log(e);
            });
            $('.bs-example-modal-lg').modal({
                keyboard: false,
                show: false,
            });
            // 下拉菜单
            $('#dLabel').dropdown();
            // 标签页
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                console.log(e);
            });
            // 文字提示
            $('[data-toggle="tooltip"]').tooltip();
            // 气泡卡片
            $('[data-toggle="popover"]').popover();

            $('#myPopover').on('hidden.bs.popover', function () {
            });

            // 警告框
            $('#myAlert').on('closed.bs.alert', function () {
            });
            // 加载按钮
            $('#myButton').on('click', function () {

                var $btn = $(this).button('loading');
                // business logic...
                setTimeout(() => {
                    $(this).button('complete');
                }, 1000)

            });

        });
    </script>
</body>

</html>